<template>
  <div >
    <div class="tableBar">
      <el-input
          placeholder="请输入姓名进行搜索"
          v-model="searchName"
          @input="handleSearch"
          style="width: 250px"
      ></el-input>
      <el-date-picker
          v-model="searchDate"
          type="date"
          placeholder="选择日期进行筛选"
          @change="handleSearch"
      ></el-date-picker>
      </div>
    <el-table  :data="tableData" style="width: 100%" class="custom-table">
      <el-table-column
          type="selection"
          width="25"
      ></el-table-column>
      <el-table-column prop="title" label="文件名" width="180"></el-table-column>
      <el-table-column label="封面">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="Article Cover" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column prop="publishTime" label="上传时间" width="180"></el-table-column>
      <el-table-column prop="commentCount" label="评论数" width="120"></el-table-column>
      <el-table-column prop="favoriteCount" label="收藏数" width="120"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleView(scope.row)">查看</el-button>
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          title: '文章标题1',
          cover: 'path/to/cover1.jpg', // 替换为实际图片路径
          publishTime: '2024-02-01 17:09:29',
          commentCount: 10,
          favoriteCount: 20
        },
        {
          title: '文章标题2',
          cover: 'path/to/cover2.jpg', // 替换为实际图片路径
          publishTime: '2024-02-01 16:54:33',
          commentCount: 5,
          favoriteCount: 15
        },
        // 更多文章数据...
      ]
    };
  },
  methods: {
    handleView(row) {
      // 查看文章逻辑
      console.log('查看文章:', row);
    },
    handleEdit(row) {
      // 编辑文章逻辑
      console.log('编辑文章:', row);
    },
    handleDelete(row) {
      // 删除文章逻辑
      console.log('删除文章:', row);
    }
  }
};
</script>

<style>
.tableBar{
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}
.custom-table {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  background-color: rgb(229, 213, 213); /* 设置表格背景色为浅白色 */
  border: 1px solid #e9e9e9; /* 可选：添加边框以增强区分度 */
}

/*!* 如果需要，您还可以为表格的其它部分添加样式，例如表头、单元格等 *!
.custom-table .el-table__header-wrapper th {
  background-color: rgba(255, 255, 255, 0.72); !* 设置表头背景色 *!
}
!* 根据需要添加自定义样式 *!
.custom-table .el-table__body tr:hover {
  background-color: #9d00fe; !* 设置鼠标悬停时的行背景色 *!
}*/
</style>